<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:replace="common/header::common_head"></head>
<style>
	.shadow{
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		z-index:998;
		background-color:gainsboro;
		opacity:0.6;
		display:none;
	}
	#addShop{
		position:fixed;
		z-index:999;
		display:none;
		top: 30%;
		left: 40%;

	}
	#editShop{
		position:fixed;
		z-index:999;
		display:none;
		top: 30%;
		left: 40%;

	}
	#addTd{
		float: right;
		margin: 15px;
		text-align: right
	}
</style>
<link rel="stylesheet" href="../bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<title>门店与员工</title>
<body class="hold-transition skin-blue sidebar-mini">
<div th:replace="common/LeftCommon::common_top_left"></div>


<div class="content-wrapper" style="min-height: 901px;">
	<div class="single-pannel">
		<section class="content-header">
			<h1>
				门店与员工
				<small>门店与员工</small>
			</h1>
			<ol class="breadcrumb">
				<li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
				<li><a href="#"></a>系统设置</li>
				<li class="active">门店与员工</li>
			</ol>
		</section>
		<section class="content">
			<div class="row">
				<div class="col-md-2" style="overflow:auto; padding: 10px; position: static">
					<div class="box" style="width: 260px;">
						<div class="box-header">
							<h3 class="box-title"><a href="/setting/stores_and_employees">全部门店</a></h3>

							<div class="box-tools">
								<div class="input-group input-group-sm" style="width: 150px;">
									<input type="text" name="table_search" id="myInput_1" onkeyup="myFunction()" class="form-control pull-right" placeholder="Search">

									<div class="input-group-btn">
										<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
									</div>
								</div>
							</div>
						</div>
						<!-- /.box-header -->
						<div class="box-body no-padding" id="myTable_1">
							<table class="table table-condensed">
								<tbody>
								<tr>
									<th style="width: 10px">#</th>
									<th>门店</th>
									<th style="width: 40px"><a href="javascript:void(0);" onclick="addShopDiv()"><b>增加+</b></a></th>
									<th style="width: 40px"></th>
								</tr>
								<tr th:each="shops,shopsStat : ${shops}">
									<td ><b>&nbsp;&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;&nbsp;</b></td>
									<td><a th:text="${shops.name}" th:href="@{'/setting/stores_and_employees?shops=' + ${shops.name}}"></a></td>
									<td><button class="badge bg-green" th:onclick="javascript:editShopDiv([[${shops.id}]],[[${shops.name}]],[[${shops.address}]],[[${shops.phone}]],[[${shops.sort}]]);">修改</button></td>
									<td><button class="badge bg-red" th:onclick="javascript:deleteShop([[${shops.id}]]);">删除</button></td>
								</tr>
								</tbody>
							</table>
						</div>
						<!-- /.box-body -->
						<div class="box-footer clearfix">
							<ul class="pagination pagination-sm no-margin pull-right">
								<li><a href="#">«</a></li>
								<li><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">»</a></li>
							</ul>
						</div>
					</div>

				</div>

				<div class="col-md-6" style="overflow:auto; padding: 10px; position: static">
					<!-- 左则面板 -->
					<div class="box">
						<div class="panel-body" style="padding-bottom:0px;">
							<div class="box-body">
								<table id="example1" class="table table-bordered table-striped">
									<thead>
									<tr>
										<th style="width: 10px">操作</th>
										<th>账号</th>
										<th>名称</th>
										<th>所属门店</th>
										<th>最后登陆时间</th>
										<th>最后登陆IP</th>
										<th>创建时间</th>
										<th>状态</th>
									</tr>
									</thead>
									<tbody>
									<tr th:each="users : ${users}" >
										<td><span class="badge bg-red" th:onclick="javascript:deletestaff([[${users.userId}]]);">删除</span></td>
										<td th:text="${users.account}"
											th:onclick="javascript:Synchronize([[${users.userId}]],[[${users.account}]],[[${users.userName}]],[[${users.password}]],[[${users.phone}]],[[${users.email}]],[[${users.shopId}]],[[${users.status}]],[[${users.roleId}]]);"></td>
										<td th:text="${users.userName}"
											th:onclick="javascript:Synchronize([[${users.userId}]],[[${users.account}]],[[${users.userName}]],[[${users.password}]],[[${users.phone}]],[[${users.email}]],[[${users.shopId}]],[[${users.status}]],[[${users.roleId}]]);"></td>
										<td th:text="${users.shop}"
											th:onclick="javascript:Synchronize([[${users.userId}]],[[${users.account}]],[[${users.userName}]],[[${users.password}]],[[${users.phone}]],[[${users.email}]],[[${users.shopId}]],[[${users.status}]],[[${users.roleId}]]);"></td>
										<td th:text="${users.loadtime}"
											th:onclick="javascript:Synchronize([[${users.userId}]],[[${users.account}]],[[${users.userName}]],[[${users.password}]],[[${users.phone}]],[[${users.email}]],[[${users.shopId}]],[[${users.status}]],[[${users.roleId}]]);"></td>
										<td th:text="${users.ip}"></td>
										<td th:text="${users.creatime}"
											th:onclick="javascript:Synchronize([[${users.userId}]],[[${users.account}]],[[${users.userName}]],[[${users.password}]],[[${users.phone}]],[[${users.email}]],[[${users.shopId}]],[[${users.status}]],[[${users.roleId}]]);"></td>
										<td th:text="${users.status}"
											th:onclick="javascript:Synchronize([[${users.userId}]],[[${users.account}]],[[${users.userName}]],[[${users.password}]],[[${users.phone}]],[[${users.email}]],[[${users.shopId}]],[[${users.status}]],[[${users.roleId}]]);"></td>
									</tr>
									</tbody>
								</table>
							</div>
							<!-- /.box-body -->
						</div>
					</div>
				</div>

				<div class="col-md-4" style="overflow:auto; padding: 10px; position: static">
					<!-- 右则单据主面板 begin -->
					<div class="box">
						<div class="panel-heading text-center" style="padding-bottom:10px;">
							<div class="btn-pull-right">
								<button class="btn-normal btn-success btn-add" onclick="location.reload();" style="float:right">
									新增员工
								</button>
							</div>
							<strong style="float:left">员工信息</strong>
						</div>
						<hr class="table" style=" height:2px;border:none;border-top:2px dotted #575757;" />
						<form style="background: white;font-weight: bold;" id="color" method="post">
							<table>
								<tr>
									<td class="col-xs-7" id="addTd"><span style="color: red;">*</span>&nbsp;账号：</td>
									<td class="col-xs-5"><input name="account" required="" placeholder="账号" id="staffaccount"></td>
								</tr>
								<tr>
									<td class="col-xs-7" id="addTd"><span style="color: red;">*</span>&nbsp;姓名：</td>
									<td class="col-xs-5"><input name="name" required="" placeholder="姓名" id="staffname"></td>
								</tr>
								<tr >
									<td class="col-xs-7" id="addTd"><span style="color: red;">*</span>&nbsp;密码：</td>
									<td class="col-xs-5">
										<!-- 后期加密 -->
										<input type="password" name="group" placeholder="8位以上" required="" id="password">
									</td>
								</tr>
								<tr>
									<td class="col-xs-7" id="addTd">启用：</td>
									<td class="col-xs-5">
										<select name="status" id="staff_status" style="width: 80px;">
											<option value="1">启用</option>
											<option value="0">失效</option>
										</select>
									</td>
								</tr>
								<tr>
									<td class="col-xs-7" id="addTd">所属门店：</td>
									<td class="col-xs-5">
										<select name="status" id="staff_shop" style="width: 80px;">
											<option value="0" >公共</option>
											<option th:each="shops,shopsStat : ${shops}" th:value="${shops.id}"><a th:text="${shops.name}"></a></option>
										</select>
										</option>
								</tr>
								<tr>
									<td class="col-xs-7" id="addTd"><span style="color: red;">*</span>&nbsp;电话：</td>
									<td class="col-xs-5">
										<input name="group" required="phone" id="staffphone">
									</td>
								</tr>
								<tr>
									<td class="col-xs-7" id="addTd"><span style="color: red;">*</span>&nbsp;邮箱：</td>
									<td class="col-xs-5">
										<input name="group"required="mail" id="email">
									</td>
								</tr>
								<tr>
									<td class="col-xs-7" id="addTd">角色：</td>
									<td class="col-xs-5">
										<select name="status" id="role" style="width: 80px;">
											<option value="0" >清选择</option>
											<option th:each="roles : ${roles}" th:value="${roles.id}"><a th:text="${roles.name}"></a></option>
										</select>
										</option>
								</tr>
								<tr>
									<td class="col-xs-6" id="addTd"><button style="float: right" class="btn-success" onclick="check()" >保存</button></td>
									<td class="col-xs-6" style="margin: 0 auto"><button style="float: right" class="btn-warning" onclick="hideShadow()" >重置密码</button></td>
								</tr>
							</table>
						</form>

					</div> <!-- 右则单据主面板  end -->

				</div>

			</div>
			<!-- /.row -->
		</section>
		<div class="shadow"></div>

		<div id="editShop" style="width: 25%;" >
			<div class="row">
				<div class="col-xs-12">
					<div style="height: 40px; background: #0b97c4; text-align: center"><p style="font-size: larger"><b>编辑门店</b></p></div>
					<form style="background: white"  method="post">
						<table>
							<tr>
								<td class="col-xs-7" id="addTd">门店名称：</td>
								<td class="col-xs-5"><input name="ename" placeholder="门店名称" id="ename"></td>
							</tr>
							<tr>
								<td class="col-xs-7" id="addTd">门店地址：</td>
								<td class="col-xs-5"><input name="eaddress" placeholder="门店地址" id="eaddress"></td>
							</tr>
							<tr>
								<td class="col-xs-7" id="addTd">联系方式：</td>
								<td class="col-xs-5"><input name="ephone" placeholder="联系方式" id="ephone"></td>
							</tr>
							<tr>
								<td class="col-xs-7" id="addTd">排序：</td>
								<td class="col-xs-5"><input name="esort" placeholder="1-100之间" id="esort"></td>
							</tr>
							<tr>
								<td class="col-xs-6" id="addTd"><button onclick="editShop()" >确定</button></td>
								<td class="col-xs-6" style="margin: 0 auto"><button onclick="hideShadow()" >取消</button></td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>

		<div id="addShop" style="width: 25%;" >
			<div class="row">
				<div class="col-xs-12">
					<div style="height: 40px; background: #0b97c4; text-align: center"><p style="font-size: larger"><b>新增门店</b></p></div>
					<form style="background: white" id="shop" method="post">
						<table>
							<tr>
								<td class="col-xs-7" id="addTd">门店名称：</td>
								<td class="col-xs-5"><input name="name" placeholder="门店名称" id="name"></td>
							</tr>
							<tr>
								<td class="col-xs-7" id="addTd">门店地址：</td>
								<td class="col-xs-5"><input name="address" placeholder="门店地址" id="address"></td>
							</tr>
							<tr>
								<td class="col-xs-7" id="addTd">联系方式：</td>
								<td class="col-xs-5"><input name="phone" placeholder="联系方式" id="phone"></td>
							</tr>
							<tr>
								<td class="col-xs-7" id="addTd">排序：</td>
								<td class="col-xs-5"><input name="sort" placeholder="1-100之间" id="sort"></td>
							</tr>
							<tr>
								<td class="col-xs-6" id="addTd"><button onclick="addShop()" >确定</button></td>
								<td class="col-xs-6" style="margin: 0 auto"><button onclick="hideShadow()" >取消</button></td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>



<!-- jQuery 3 -->
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="../../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- page script -->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script>
	function myFunction() {
		// 声明变量
		var input, filter, table, tr, td, i;
		input = document.getElementById("myInput_1");
		filter = input.value.toUpperCase();
		table = document.getElementById("myTable_1");
		tr = table.getElementsByTagName("tr");

		// 循环表格每一行，查找匹配项
		for (i = 0; i < tr.length; i++) {
			td = tr[i].getElementsByTagName("td")[1];
			if (td) {
				if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
					tr[i].style.display = "";
				} else {
					tr[i].style.display = "none";
				}
			}
		}
	}
	$(function () {
		$('#example1').DataTable()
		$('#example2').DataTable({
			'paging'      : true,
			'lengthChange': false,
			'searching'   : false,
			'ordering'    : true,
			'info'        : true,
			'autoWidth'   : false
		})
	})

	// 添加门店
	function addShop() {
		$.ajax({
			url: "/shop/addShop",
			type: "POST",
			async:false,
			data: $("#shop").serialize(),
			success:function (data) {
				if (data.code == 1) {
					window.location.href = "/setting/stores_and_employees";
					alert("添加成功");
				} else {
					alert(data.msg);
				}
			}
		})
	}

	// 打开增加门店框
	function addShopDiv() {
		$(".shadow").css({'display':'block'});
		$("#addShop").show();
		return 0;
	}
	// 删除门店
	function deleteShop(shopId) {
		$.ajax({
			url:"/shop/deleteShop",
			type:'POST',
			data:{
				shopId:shopId
			},
			success:function (data) {
				if (data.code == 1) {
					window.location.href = "/setting/stores_and_employees";
					alert("删除成功");
				} else {
					alert(data.msg);
				}
			}
		})
	}
	var eshopId = "";
	// 打开编辑门店框
	function editShopDiv(shopId,shopName,shopAddress,shopPhone,shopSort) {
		if (shopId == null) {
			alert("未知错误");
			return 0;
		}
		eshopId = shopId;
		$("#ename").val(shopName);
		$("#eaddress").val(shopAddress);
		$("#ephone").val(shopPhone);
		$("#esort").val(shopSort);
		$(".shadow").css({'display':'block'});
		$("#editShop").show();
		return 0;
	}

	// 修改门店
	function editShop() {
		$.ajax({
			url:"/shop/editShop",
			type:'POST',
			data:{
				id:eshopId,
				name:$("#ename").val(),
				sort:$("#esort").val(),
				address:$("#eaddress").val(),
				phone:$("#ephone").val()
			},
			success:function (data) {
				if (data.code == 1) {
					window.location.href = "/setting/stores_and_employees";
					alert("修改成功");
				} else {
					alert(data.msg);
				}
			}
		})
	}

	var staffid="";var oldaccount="";
	// 名称备注同步
	function Synchronize(userId,account,userName,password,phone,email,shopId,status,roleId) {
		staffid=userId;
		oldaccount=account;
		$("#staffaccount").val(account);
		$("#staffname").val(userName);
		$("#password").val(password);
		$("#staffphone").val(phone);
		$("#email").val(email);
		$("#staff_shop").val(shopId);
		$("#staff_status").val(status);
		$("#role").val(roleId);
		// $("[name='radio'][value="+roleId+"]").prop("checked", "checked");
	}

	// 名称备注去处
	function newstaff() {
		oldaccount="";
	}

	var confip=returnCitySN["cip"];//+'\n'+returnCitySN["cname"],

	// 员工保存
	function saveStaff() {
		$.ajax({
			url:"/staff/saveStaff",
			type:'POST',
			data:{
				oldaccount:oldaccount,
				userId:staffid,
				account:$("#staffaccount").val(),
				userName:$("#staffname").val(),
				password:$("#password").val(),
				phone:$("#staffphone").val(),
				email:$("#email").val(),
				ip:confip,
				shopId:$("#staff_shop option:selected").val(),
				status:$("#staff_status option:selected").val(),
				roleId:$("#role option:selected").val(),
				// roleId:$('input:radio:checked').val(),
			},
			success:function (data) {
				if (data.code == 1) {
					window.location.href = "/setting/stores_and_employees";
					alert("保存成功");
				} else {
					alert(data.msg);
				}
			}
		})
	}

	// 员工删除
	function deletestaff(userId) {
		$.ajax({
			url:"/staff/deletestaff",
			type:'POST',
			data:{
				staffId:userId
			},
			success:function (data) {
				if (data.code == 1) {
					window.location.href = "/setting/stores_and_employees";
					alert("删除成功");
				} else {
					alert(data.msg);
				}
			}
		})
	}

	// 输入检查
	function check() {
		var account=$("#staffaccount").val();
		var name=$("#staffname").val();
		var password=$("#password").val();
		var phone=$("#staffphone").val();
		var email=$("#email").val();
		var flag=(account!="")&&(name!="")&&(password!="")&&(phone!="")&&(email!="");
		if(flag){
			saveStaff();
		}
	}

	function hideShadow() {
		$(".shadow").css({'display': 'none'});
		$('#addColor').hide();
		$('#editColor').hide();
		$('#editGroup').hide();
		$("#color")[0].reset();
	}
</script>
</body>
</html>